<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #mainDiv{
            width: 400px;
            margin: auto;
            text-align: center;
        }
        #mainDiv>img{
            margin: 100px 0 20px;
            border-radius: 40px;
        }
        #mainDiv>input{
            width: 80px;
        }
        #mainDiv img{
            width: 80px;
            height: 80px;
            cursor: pointer;
        }
        #mainDiv>div{
            width: 260px;
            height: 90px;
            background-color: darkgray;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            margin: 10px auto auto;
            visibility: hidden;
        }
    </style>
    <script>
        var selectImgs;
        //文档加载完毕后触发
        window.onload = function (){
            selectImgs = document.getElementById("selectImg");
            var imgArray = selectImgs.getElementsByTagName("img");
            for (let i = 0; i < imgArray.length; i++) {
                imgArray[i].onclick = function (){
                    selectImg(this);
                }
            }
        }
        function chooseImg(selectObj){
            var selectFrom = document.getElementById(selectObj);
            if (selectFrom.style.visibility == "visible"){
                selectFrom.style.visibility = "hidden";
            }
            else {
                selectFrom.style.visibility = "visible";
            }
        }
        function selectImg(imgObj){
            document.getElementById('showImg').src = imgObj.src;
        }
    </script>
</head>
<body id="mainDiv">
    <img src="../loginImg/sys.jpg" id="showImg"><br>
    <input type="button" value="选择头像" onclick="chooseImg('selectImg')">
    <div id="selectImg">
        <img src="../loginImg/b2.jpg" >
        <img src="../loginImg/b3.jpg" >
        <img src="../loginImg/b4.jpg" >
    </div>
</body>
</html>